<template>
  <div v-if="!isInitial">
    <div class="my_page" v-if="isConfig">
      <!-- 数据表盘 isView展示还是配置-->
      <dialView :isView="isView" :tableData="tableData" :tableData2="tableData2" :dialSet="dialSet"></dialView>
      <!-- 折线图 -->
      <lineView :isView="isView" :tableData="tableData2" :lineSet="lineSet"></lineView>
      <!-- 饼图 -->
      <pieView :isView="isView" :tableData="tableData2" :pieSet="pieSet"></pieView>
      <!-- 悬浮按钮 -->
      <el-button type="primary" icon="el-icon-plus" circle class="float_but" @click="toSet(1)" v-if="isView"></el-button>
      <el-button type="primary" icon="el-icon-minus" circle class="float_but" @click="toSet(2)" v-else></el-button>
    </div>
    <div class="no_config" v-else>
      <!-- 悬浮按钮 -->
      <el-button type="primary" icon="el-icon-plus" circle class="float_but" v-permission="'SBTB_ADD'" @click="toSet(1)"></el-button>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import charts from "@/views/chart/chart.js"
import dialView from "./dialView.vue"
import lineView from "./lineView.vue"
import pieView from "./pieView.vue"
import { queryDeviceDashboard, queryDeviceRealDataInfo, queryRealTimeDataPullDown } from "@/api/showManage/index"
import { queryDeviceQJDashboard } from "@/api/settingManagement/allManagement"
export default {
  components: {
    dialView,
    lineView,
    pieView
  },
  data() {
    return {
      isView: true, //展示还是配置
      isInitial: true, //是否初始化
      isConfig: false, //是否已经配置
      tableData: [],
      tableData2: [],
      dialSet: {},
      lineSet: {},
      pieSet: {}
    }
  },
  created() {},
  mounted() {
    this.getSet()
    this.getList()
    this.getList2()
  },
  watch: {
    isView: {
      handler(newValue) {
        if (this.isView) this.getSet()
      }
      // immediate: true
    }
  },
  methods: {
    getSet() {
      this.isInitial = true
      let result = this.$route.query.type == "deviceQuery" ? queryDeviceDashboard : queryDeviceQJDashboard
      result({
        deviceCode: this.$route.query.deviceCode
      }).then((res) => {
        if (res.object == null) {
          this.isConfig = false
          this.isInitial = false
        } else {
          Object.keys(res.object).forEach((key) => {
            if (key == "oneParam" || key == "twoParam" || key == "threeParam" || key == "fourParam" || key == "fiveParam") {
              this.dialSet[key] = res.object[key]
            } else if (key == "sixParam" || key == "sevenParam" || key == "eightParam") {
              this.lineSet[key] = res.object[key]
            } else if (key == "nineParam" || key == "tenParam" || key == "eleParam") {
              this.pieSet[key] = res.object[key]
            }
          })
          this.isConfig = true
          this.isInitial = false
        }
      })
    },

    getList() {
      queryDeviceRealDataInfo({
        deviceCode: this.$route.query.deviceCode
      }).then((res) => {
        this.tableData = res.object
      })
    },

    getList2() {
      queryRealTimeDataPullDown({
        deviceCode: this.$route.query.deviceCode
      }).then((res) => {
        this.tableData2 = res.object
      })
    },

    toSet(type) {
      this.isConfig = true
      this.isView = type == 1 ? false : true
    }
  }
}
</script>
<style lang="scss" scoped>
.my_page {
  display: flex;
  flex-direction: column;
  width: 100%;
  // height: 100%;
  height: calc(100vh - 250px);
  position: relative;
}

.no_config {
  width: 100%;
  height: calc(100vh - 250px);
  background-image: url("../../../../../../assets/img/no_config.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  position: relative;
}

.float_but {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 299;
}
</style>
